<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态菜单</title>
<link rel="stylesheet" href="./assets/css/style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
  integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous">
</script>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="./styles/style.css">
<style>
       body{
  background-image:url(./images/mbg5.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;

}
   body {
        font-family: Arial, sans-serif;
        background-color: #f8f9fa;
        margin: 20px;
        
    }
    .container {
            margin-top: 5%;
            padding: 20px;
            border: 2px solid #ccc;
            border-radius: 10px;
        }
    h4 {
        text-align: center;
        margin-bottom: 30px;
    }

    .form-select {
        width: 80%;
        max-width: 200px;
        margin: 0 auto;
    }

    button {
        width: 80%;
        padding: 10px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        max-width: 200px;
        margin: 20px auto 0; 
        display: block; 
    }

    button:hover {
        background-color: #0056b3;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        background-color: #ffffff;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    li:nth-child(odd) {
        background-color: #f0f0f0;
    }
    @font-face {
      font-family: 'Font1';
      src: url('./fonts/Conther-2.ttf') format('TrueType'),
        /* 支持现代浏览器 */

        /* 可以添加更多字体格式，以提高兼容性 */
    }

    @font-face {
      font-family: 'Font2';
      src: url('./fonts/SankeiCutePopanime-2.ttf') format('TrueType'),
        /* 支持现代浏览器 */

        /* 可以添加更多字体格式，以提高兼容性 */
    }

    @font-face {
      font-family: 'Font3';
      src: url('./fonts/Crystal-Regular-2.ttf') format('TrueType'),
        /* 支持现代浏览器 */

        /* 可以添加更多字体格式，以提高兼容性 */
    }
    nav{
  font-family: 'Font1', sans-serif;
}
</style>

</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark  navbar-custom">
        <a class="navbar-brand" href="./main.html">Food Travel</a>
        <a class="navbar-brand" href="./post1.html" >Post</a>
        <a class="navbar-brand" href="./history.html" >History</a>
        <a class="navbar-brand" href="./add.html" >Add</a>
        <a class="navbar-brand" href="./contact.html" >Contact</a>
        <div class="btn-login">
          <a href="../index.html" class="no-style" onclick="logout()">Logout</a>
    
        </div>
      </nav>
    <div class="container">
<h4>Daily Food Record</h4>
<h4>Balanced food</h4>
<select id="select1" class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
    <option selected disabled>Choose from here</option>
    <option value="1">cereals</option>
    <option value="2">Vegetables and fruits</option>
    <option value="3">Milk and dairy products</option>
    <option value="4">Animal-based foods</option>
    <option value="5">Oil, salt, sugar.</option>
</select>

<select id="select2" class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
    <option selected disabled>Choose from here</option>
    <option value="1">cereals</option>
    <option value="2">Vegetables and fruits</option>
    <option value="3">Milk and dairy products</option>
    <option value="4">Animal-based foods</option>
    <option value="5">Oil, salt, sugar.</option>
</select>

<select id="select3" class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
    <option selected disabled>Choose from here</option>
    <option value="1">cereals</option>
    <option value="2">Vegetables and fruits</option>
    <option value="3">Milk and dairy products</option>
    <option value="4">Animal-based foods</option>
    <option value="5">Oil, salt, sugar.</option>
</select>
<button onclick="submitSelection()">Submit</button>
</div>
<ul id="summaryList"></ul>

<script>
    var day = 1; // 初始化天数

    function submitSelection() {
        var select1 = document.getElementById("select1");
        var select2 = document.getElementById("select2");
        var select3 = document.getElementById("select3");
        var summaryList = document.getElementById("summaryList");

        // 获取选项值
        var option1 = select1.options[select1.selectedIndex].text;
        var option2 = select2.options[select2.selectedIndex].text;
        var option3 = select3.options[select3.selectedIndex].text;

        // 创建新的列表项并添加到列表中
        var newItem = document.createElement("li");
        newItem.innerHTML = "Day" + day + "<br>" + option1 + "<br>" + option2  + "<br>"+ option3;
        summaryList.appendChild(newItem);

        day++; // 自增天数
    }
</script>
</body>
</html>
